<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { useClassStore } from '../../store';
import { storeToRefs } from 'pinia';
import { useDictionaryStore } from '../../store';
import { ApiClass } from '../../api';
import {  ElMessageBox, FormInstance, FormRules } from 'element-plus';


const {teachList,adminList,jobList}=storeToRefs(useClassStore())
const {classMajorList}=storeToRefs(useDictionaryStore())
const model=ref<API.Class.Add>({
            cls_name:"",
            cls_dic_id_major:0,
            cls_clsr_id:null,
             cls_stf_id_teacher:0,
            cls_stf_id_admin:0,
            cls_stf_id_job:0,
            cls_begin:null,
            cls_end:null,
            cls_remark:""
})

const formRef=ref<FormInstance|null>(null)
const emits=defineEmits<{(name:'save',model:API.Class.Add):void}>()
const cancel=async()=>{
    await ElMessageBox.confirm("确定要取消吗？", "提示", { type: "warning" });
    show.value=false
}
const roules:FormRules={
    cls_name:[
        {required:true,message:"班级名称不能为空",trigger:"blur"},
        {min:2,max:10,message:"长度在2-10个字符",trigger:"blur"},
        //@ts-ignore
        {validator:async(rule,value,callback)=>{
            if(await ApiClass.valid({cls_name:value})>0){
                callback(new Error("班级名称已存在"))
            }else{
                callback()
            }
            },trigger:"blur"    
        }
    ]
}
const save=async()=>{
await formRef.value?.validate()
emits('save',model.value)
show.value=false
}
defineExpose({
    begin:()=>{
     formRef.value?.resetFields()
model.value.cls_name=''
model.value.cls_dic_id_major=0
model.value.cls_remark=''
model.value.cls_stf_id_admin=0
model.value.cls_stf_id_teacher=0
     nextTick(()=> show.value=true)
    },
    end:()=>show.value=false
})
const show=ref<boolean>(false)
</script>
<template>
   <el-dialog title="新增班级" v-model="show" width="500px">
       <el-form ref="formRef" :model="model" label-width="80px" :rules="roules">
           <el-form-item label="班级名称" prop="cls_name">
            <el-input v-model="model.cls_name" placeholder="请输入名称" ></el-input>
           </el-form-item>
           <el-form-item label="班级专业">
            <el-select v-model="model.cls_dic_id_major">
                <el-option label="--请选择--" :value="0" ></el-option>
                <el-option v-for="item in classMajorList" :key="item.dic_id" :label="item.dic_name" :value="item.dic_id">
                </el-option>
            </el-select>
           </el-form-item>
           <el-form-item label="教学老师">
            <el-select v-model="model.cls_stf_id_teacher">
                <el-option label="--请选择--" :value="0"></el-option>
                <el-option v-for="item in teachList" :key="item.stf_id" :label="item.stf_name" :value="item.stf_id">
                </el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="教务老师">
            <el-select v-model="model.cls_stf_id_admin" >
                <el-option label="--请选择--" :value="0"></el-option>
                <el-option v-for="item in adminList" :key="item.stf_id" :label="item.stf_name" :value="item.stf_id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="就业老师">
            <el-select v-model="model.cls_stf_id_job" >
                <el-option label="--请选择--" :value="0"></el-option>
                <el-option v-for="item in jobList" :key="item.stf_id" :label="item.stf_name" :value="item.stf_id">
                </el-option>
            </el-select>
        </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="model.cls_remark" placeholder="" type="textarea"></el-input>
          </el-form-item>
       </el-form>
       <div slot="footer">
           <el-button @click="cancel">取 消</el-button>
           <el-button type="primary" @click="save">确 定</el-button>
       </div>
   </el-dialog>
</template>



<style scoped>

</style>